/**
 * Created by Freeman on 16/11/30.
 */
import React, {Component, PropTypes} from 'react'
import ReactDOM from 'react-dom'
import {observer} from 'mobx-react'
import iconPlay from'../assets/icon-play.png'
import iconPause from '../assets/icon-pause.png'
@observer
class PlayBar extends Component {
    constructor(props) {
        super(props)
        this.showPlayPage = this.showPlayPage.bind(this)
        this.updateTime = this.updateTime.bind(this)
        this.playContinue = this.playContinue.bind(this)
        this.play = this.play.bind(this)
        this.state = {
            playPageShow: false,
            iconPlay: iconPlay,
            iconPause: iconPause,
            blurBgShow: false,
            rankshow: true
        }
    }

    componentDidMount() {

    }
    //通过监听，实现根据自动
    componentWillReact() {
        const {musicStore} = this.props
        let audioNode = ReactDOM.findDOMNode(this.refs.music)
        if (musicStore.music.playing) {
            audioNode.play()
        } else {
            audioNode.pause()
        }
    }

    showPlayPage() {

    }

    updateTime() {
        const {musicStore} = this.props
        let audioNode = ReactDOM.findDOMNode(this.refs.music)
        musicStore.updateCurrentTime(parseInt(audioNode.currentTime))
        musicStore.updateDuration(parseInt(audioNode.duration))
    }

    playContinue() {
        const {musicStore} = this.props
        musicStore.playContinue()
    }

    tapButton(event) {
        event.preventDefault()
        this.play()
    }

    play() {
        const {musicStore} = this.props
        musicStore.play()
    }

    render() {
        const {musicStore,showPlayPage,playPageShow} = this.props

        return (
            <div id="play-bar" style={playPageShow?{display:'none'}:{}}>
                <audio id="music"
                       ref="music"
                       autoPlay="autoPlay"
                       src={musicStore.dataUrl}
                       onTimeUpdate={this.updateTime}
                       onEnded={this.playContinue}>
                </audio>
                <div className="play-bar-image-container" onTouchStart={showPlayPage} onClick={showPlayPage}>
                    <img className="play-bar-image" src={musicStore.music.coverImgUrl} alt=""/>
                </div>
                <p className="play-bar-text" onTouchStart={showPlayPage}
                   onClick={showPlayPage}>{musicStore.music.song.name}</p>
                <img className="play-bar-button" alt=""
                     src={musicStore.music.playing ? this.state.iconPause : this.state.iconPlay}
                     onTouchStart={(e) => {
                         this.tapButton(e)
                     }}
                     onClick={(e) => {
                         this.tapButton(e)
                     }}/>
            </div>
        )
    }
}
PlayBar.propTypes = {
    playPageShow: PropTypes.bool.isRequired,
    musicStore: PropTypes.object.isRequired,
    showPlayPage: PropTypes.func.isRequired,
}

export default PlayBar